<template>

    <div class="login-container">
        <!-- 新增的图片和文本区域 -->
        <div class="logo-and-text">
            <img src="https://codelover.club/static/img/headLogo.d458f61f.png" alt="Logo" class="logo" />
            <p class="text-below-logo">程 / 序 / 员 / 的 / 梦 / 工 / 厂</p>
        </div>
        <common-list>
            <div class="list">
                <!-- 返回按钮 -->
                <router-link to="/loginform" class="return-button">
                    返回登录
                </router-link>
                <div class="repassword">
                    <p>重置密码</p>
                </div>
                <input type="text" v-model="credentials.emailOrUsername" placeholder="请输入邮箱" />
                <div>
                    <input type="text" v-model="credentials.captcha" placeholder="请输入获取的验证码" />
                    <span class="get-verification" @click="getEmailVerification">获取验证码</span>
                </div>
                <input type="text" v-model="credentials.username" placeholder="邮箱/用户名/手机号" />
                <input type="password" v-model="credentials.password" placeholder="请输入密码" />
                <button @click="login">确认</button>
            </div>
        </common-list>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import CommonList from './CommonList.vue'; // 引入common-list组件

const credentials = ref({
    emailOrUsername: '',
    captcha: '',
    username: '',
    password: '',
});

const router = useRouter();

// 登录方法
const login = () => {
    // 检查用户名和密码是否与预设值匹配
    if (credentials.value.username === '22002335' && credentials.value.password === '20021008') {
        // 登录成功，跳转到目标页面
        router.push('/home'); // 假设目标路由的路径为 '/home'
    } else {
        // 登录失败，提示用户
        alert('重置失败！');
    }
};

const forgotPassword = () => {
    // 实现忘记密码的逻辑
};


// 控制模态框显示的状态
const isModalVisible = ref(false);

// 隐私政策的内容（示例文本）
const privacyPolicyContent = "《隐私政策》在线学院网站codelover.club(以下简称“在线学院”)尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，在线学院会按照本隐私权政策的规定使用和披露您的个人信息。但在线学院将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，在线学院不会将这些信息对外披露或向第三方提供。在线学院会不时更新本隐私权政策。 您在同意在线学院服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于在线学院服务使用协议不可分割的一部分。";

// 显示模态框
const showModal = () => {
    isModalVisible.value = true;
};

// 隐藏模态框
const hideModal = () => {
    isModalVisible.value = false;
};

const email = ref('');

const getEmailVerification = async () => {
    if (email.value) {
        try {
            const response = await fetch('/api/verification', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email: email.value }),
            });

            if (!response.ok) {
                throw new Error(`Error: ${response.status}`);
            }

            const data = await response.json();
            if (data.success) {
                console.log('Verification code sent:', data.code);
                // 可以在这里添加成功提示的逻辑
            } else {
                console.error('Error sending verification code:', data.message);
                // 可以在这里添加错误提示的逻辑
            }
        } catch (error) {
            console.error('Network error:', error);
            // 可以在这里添加网络错误的提示逻辑
        }
    } else {
        alert('Please enter your email address.');
    }
};

</script>

<style scoped>
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.return-button {
    position: absolute;
    /* 绝对定位 */
    top: 10px;
    /* 距离顶部10px */
    right: 10px;
    /* 距离右侧10px */
    z-index: 10;
    /* 确保按钮在其他内容之上 */
    /* 其他样式保持不变 */
    color: rgb(49, 63, 193);
    /* 文字颜色 */
    padding: 5px 10px;
    /* 内边距 */
    text-decoration: none;
    /* 移除链接的下划线 */
    border-radius: 5px;
    /* 圆角 */
    transition: background-color 0.3s;
    /* 背景颜色变化的过渡效果 */

}



.repassword {
    font-size: 22px;
    font-weight: bold;
    color: #0b3570bd;
    text-decoration: underline;
    margin: 10px 0;
    text-align: center;
}


.logo-and-text {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: flex-start;
    /* 水平方向从左侧开始 */
    margin-bottom: 20px;
    /* 根据需要调整 */
    text-align: left;
    /* 确保文本也是左对齐的（尽管这是默认行为） */
}

.text-below-logo {
    font-size: 18px;
    /* 根据需要调整 */
    color: #ffffff;
    /* 根据需要调整 */
    font-weight: bold;
    font-size: 20px;
    margin-top: 30px;
    /* 根据需要添加一些上边距，使文本与图片之间有一些间距 */
}

.logo {
    width: 100px;
    /* 根据需要调整 */
    height: auto;
    /* 确保图片没有额外的右侧边距 */
    margin-right: 0;
    /* 通常这不是问题，除非有其他样式覆盖了它 */
    /* 如果你需要确保图片与文本之间有间距，可以在这里添加 margin-bottom */
}


.login-container {
    display: flex;
    flex-direction: column;
    /* 垂直排列子元素 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    width: 100%;
    max-width: 100%;
    /* 不超过屏幕宽度 */
    min-height: 100vh;
    /* 至少为视口高度 */
    padding: 20px;
    /* 避免内容接触屏幕边缘 */
    box-sizing: border-box;
    /* 使宽度和高度包括内边距和边框 */
    background-image: linear-gradient(to bottom, #3a74b7 50%, transparent 50%);
    overflow: hidden;
    /* 防止内容溢出 */
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 20px;
    background-color: #4c88cc;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.common-list {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 改为垂直排列 */
    width: 100%;
    height: 100%;
    max-width: 300px;
    /* 最大宽度限制 */
    max-height: 400px;
    padding: 2vw;
    /* 使用视口宽度的百分比 */
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* overflow: auto; */
}

.list {
    margin-bottom: 2vw;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: rgb(241, 237, 237);
}

.common-list input[type="text"]:focus,
.common-list input[type="password"]:focus {
    background-color: #f5f6e3;
    outline: none;
    box-shadow: none;
}

/* 响应式设计：适配小屏幕 */
@media (max-width: 768px) {
    .common-list {
        padding: 5vw;
        /* 在小屏幕上增加内边距 */
    }
}

@media (max-width: 480px) {
    .common-list {
        padding: 10vw;
        /* 在非常小的屏幕上进一步调整内边距 */
    }
}
 
.get-verification {
    position: absolute;
    right: 40px;
    /* 根据实际情况调整，确保不超出输入框边界 */
    top: 44%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #0e79c0;
    border-left: 1px dashed #909090;
    /* 添加一些左边距，使得虚线和文字之间有间隔 */
    padding-left: 6px;
    padding-right: 2px;
}

.get-verification:hover {
    color: #0056b3;
}
</style>